// unit
@mi-unit: 1rem;
@mi-unit-sm: 0.75rem;
@mi-unit-normal: 0.875rem;
@mi-unit-base: 16;

// space
@mi-gap: 0.5rem;
@mi-margin: 1rem;
@mi-padding: 1rem;

// animation duration
@mi-anim-duration: .4s;

// z-index
@mi-zindex: 20240110;
@mi-zindex-modal: 20240210;

// scrollbar width
@mi-scrollbar-width: 1.32rem;

// breakpoints
@mi-xxxl: 125rem;
@mi-xxl: 100rem;
@mi-xl: 75rem;
@mi-mlg: 64rem;
@mi-lg: 62rem;
@mi-md: 48rem;
@mi-sm: 36rem;
@mi-xs: 30rem;

// icon
@mi-icon-size: @mi-gap * 3;
@mi-icon-size-large: @mi-gap * 5;

// header
@mi-header-height: @mi-gap * 7;

// historical
@mi-historical-height: @mi-gap * 4;

// sider
@mi-sider-width: @mi-gap * 32;
@mi-sider-width-mini: @mi-gap * 10;
@mi-sider-logo: @mi-gap * 3;
@mi-sider-logo-container: @mi-gap * 25;
@mi-sider-logo-height: @mi-gap * 16;
@mi-sider-logo-small: @mi-gap * 5;
@mi-sider-logo-large: @mi-gap * 8;
@mi-sider-logo-large-height: @mi-gap * 24;

// menu
@mi-menu-item-height: @mi-gap * 6.25;

// font
@mi-font-basic: "Pingfang SC", "Microsoft YaHei", "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
@mi-font-code: Lucida Console, Consolas, "Courier New", "Source Code Pro", "Miscrosoft Yahei", "Segoe UI", "Lucida Grande", Helvetica, Arial, FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif;

// property setting ( applies only to width / padding etc. converted to rem )
.properties(@key, @value: 8) {
    @{key}: if((ispercentage(@value)), @value, if((isunit(@value, rem)), @value, (@value / @mi-unit-base) * @mi-unit));
}

// font size
.font-size(@value: 14, @weight: normal) {
    .properties(font-size, @value);
    font-weight: @weight;
}

// gradient
.gradient(@start: var(--mi-inverse-on-surface), @stop: var(--mi-inverse-surface), @r: 315deg) {
    background-image: linear-gradient(@r, @start 0%, @stop 74%);
}
.gradient-hint(@start: var(--mi-primary), @hint: var(--mi-secondary), @stop: var(--mi-tertiary), @r: 127deg) {
    background-color: @start;
    background-image: linear-gradient(@r, @start 0%, @hint 52%, @stop 100%);
}
.gradient-text(@start: var(--mi-primary), @hint: var(--mi-secondary), @stop: var(--mi-tertiary), @r: 127deg) {
    background: transparent linear-gradient(@r, @start 0%, @hint 52%, @stop 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

// letter spacing.
.letter-spacing(@value: 2) {
    .properties(letter-spacing, @value);
}

// animation
.transition(@property: all, @duration: @mi-anim-duration, @function: ease) {
    transition: @property @duration @function;
}

// flex
.flex(@align: center, @justify: center, @direction: row) {
    display: flex;
    align-items: @align;
    justify-content: @justify;
    flex-direction: @direction;
}

// grid
.grid(@columns: 1, @gap: 16) {
    display: grid;
    grid-template-columns: repeat(@columns, 1fr);
    grid-gap: (@gap / @mi-unit-base) * @mi-unit;
    width: 100%;
}

// background
.background(@url: unknow, @size: cover, @position: center center, @repeat: no-repeat) {
    background-position: @position;
    background-repeat: @repeat;
    background-size: @size;
    background-image: if(isstring('unknow'), unset, url(@url));
}

// border
.border(@color: var(--mi-primary), @width: 1, @style: solid) {
    border-color: @color;
    border-width: if((isunit(@width, rem)), @width, (@width / @mi-unit-base) * @mi-unit);
    border-style: @style;
}

// fixed
.fixed(@left: 0, @top: 0) {
    position: fixed;
    width: 100%;
    height: 100%;
    top: if((ispercentage(@top)), @top, (@top / @mi-unit-base) * @mi-unit);
    left: if((ispercentage(@left)), @left, (@left / @mi-unit-base) * @mi-unit);
}

// ellipsis
.ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

// text line clamp
.lines(@line: 2) {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: @line;
    -webkit-box-orient: vertical;
}

// radius
.radius(@raduis: 4) {
    border-radius: (@raduis / @mi-unit-base) * @mi-unit;
}

.circle() {
    border-radius: 50%;
}

// scrollbar
.scrollbar(@width: 4, @radius: 2) {
    &::-webkit-scrollbar {
        .properties(width, @width);
    }

    &::-webkit-scrollbar-thumb {
        .radius(@radius);
        background: var(--mi-primary);
    }
}

// hide scrollbar
.hide-scrollbar() {
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

// backdrop filter blur
.frosted(@blur: 24) {
    -webkit-backdrop-filter: blur((@blur / @mi-unit-base) * @mi-unit);
    -moz-backdrop-filter: blur((@blur / @mi-unit-base) * @mi-unit);
    backdrop-filter: blur((@blur / @mi-unit-base) * @mi-unit);
}

// no select
.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

// pseudo element
.pseudo(@left: 0, @top: 0, @cursor: pointer) {
    &:before {
        position: absolute;
        left: @left;
        top: @top;
        width: 100%;
        height: 100%;
        content: '';
        .flex();
        cursor: @cursor;
    }
}